<template>
  <div class="out-apply">
    <div class="mint-tab-container-item">
      <div class="wcsq-tab-content" style="background-color: white">
        <div style="background-color: rgb(82, 199, 202)">
          <div
            class="mint-layout-container bh-bg-color-light xszp_image"
            style="
              width: 86px !important;
              height: 86px !important;
              border-top-left-radius: 43px !important;
              border-bottom-left-radius: 43px !important;
              border-top-right-radius: 43px !important;
              border-bottom-right-radius: 43px !important;
              display: inline-block !important;
              margin: 20px;
              background-color: #fff !important;
            "
          >
            <img
              class="mint-image"
              style="
                width: 80px;
                height: 80px;
                border-radius: 50%;
                margin: 3px;
                display: none;
              "
            />
            <img
              src="@/assets/images/none.png"
              class="mint-image"
              style="width: 80px; height: 80px; border-radius: 50%; margin: 3px"
            />
          </div>
          <div
            class="xsxx"
            style="
              box-sizing: border-box;
              display: inline-block;
              margin-top: 30px;
              vertical-align: top;
              font-size: 16px;
              line-height: 30px;
              color: white;
            "
          >
            <div>{{ person.name }}&nbsp;&nbsp;{{ person.number }}</div>
            <div>{{ person.college }}/</div>
          </div>
        </div>
        <!---->
        <div
          class="mint-text wcsq-erm-title mt-color-grey"
          style="
            box-sizing: border-box;
            color: #1e2329;
            position: relative;
            word-break: break-word;
            line-height: 50px;
            margin-left: 30px;
            margin-right: 30px;
            height: 50px;
            font-size: 18px;
            border-bottom: 1px solid #eee;
          "
        >
          临时出校二维码
        </div>
        <div
          class="wcsq-ld-content"
          style="
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            margin-top: 15px;
          "
        >
          <img
            alt=""
            src="@/assets/images/ld2.png"
            class="wcsq-ld-img"
            style="
              width: 26px;
              height: 26px;
              margin-top: 12px;
              margin-right: 5px;
              display: inline-block;
            "
          />
          <div
            class="wcsq-ld-text"
            style="
              color: rgb(255, 153, 24);
              display: inline-block;
              vertical-align: top;
            "
          >
            距离返回时间还剩：<span id="myTime">{{ timeStr }}</span>
          </div>
        </div>
        <div
          class="wcsq-ewm-content"
          style="
            margin-left: calc(50vw - 85px);
            width: 170px;
            height: 170px;
            border: 1px solid rgba(239, 239, 239, 1);
            margin-top: 10px;
          "
        >
          <div id="wcsq_school_code" style="margin: 10px">
            <canvas id="canvas" width="150" height="150"></canvas>
            <!-- <qrcode value="person.number" :options="qrcodeOptions"></qrcode> -->
          </div>
        </div>
        <div
          class="wcsq-ewm-tip"
          style="
            margin-left: calc(20vw);
            width: calc(60vw);
            text-align: center;
            font-size: 12px;
            color: rgb(146, 150, 156);
            margin-top: 20px;
            padding-bottom: 30px;
          "
        >
          请向校方检查人员出示二维码，扫码进出校～
        </div>
        <button
          class="mint-button fxyq_fxsq_btn mt-btn-default mint-button--normal"
          style="margin-top: 50px; display: none"
        >
          <!---->重新申请
        </button>
      </div>
      <div class="wcsq-tab-content" style="margin-top: 10px; display: none">
        <div class="mint-layout-container bh-bg-color-light cjas1u9dg">
          <div
            class="OCjauorj8v mint-steps mt-bg-white mint-steps--vertical"
            selected="selected"
          >
            <!---->
            <div
              class="mint-steps__items mint-steps__items--alone"
              style="padding-left: 150px"
            >
              <div
                class="mint-step bh-color-gray-3 mint-step--vertical mt-color-grey"
                text="结束"
              >
                <div class="mint-step__circle-container mt-bg-lv3">
                  <i class="mint-step__circle mt-bg-grey-lv5"></i>
                </div>
                <div class="mint-step__time mt-color-grey-lv4"></div>
                <div class="mint-step__title">结束</div>
                <div class="mint-step__line mt-bg-grey-lv6"></div>
              </div>
            </div>
          </div>
        </div>
        <button
          class="mint-button fxyq_fxsq_btn mt-btn-default mint-button--normal"
          style="margin-top: 50px"
        >
          <!---->重新申请
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
import axios from "axios";
export default {
  name: "out-apply",
  data() {
    return {
      qrcodeOptions: {
        width: 150,
        margin: 0,
      },
      person: {
        name: "",
        number: "",
        college: "",
      },
      timeStr: "",
    };
  },
  mounted() {
    let self = this;
    axios.get("../basic.json").then((res) => {
      self.person = res.data.person;
      self.genQRCode(self.person.number);
    });
    let end = new Date();
    end.setHours(23);
    end.setMinutes(15);
    end.setSeconds(0);
    window.setInterval(function () {
      self.timeStr = self.format(end);
    }, 1000);
  },
  methods: {
    genQRCode(number) {
      QRCode.toCanvas(document.getElementById("canvas"), number, {
        width: 150,
        margin: 0,
        scale: 1,
        color: {
          dark: "#ff84f9",
          light: "#ffffff",
        },
      });
    },
    format(end) {
      var timeStr = "";
      let now = new Date();
      let diff = end.getTime() - now.getTime();
      let hour = Math.floor(diff / (3600 * 1000));
      let minute = Math.floor(diff / (60 * 1000)) % 60;
      let second = Math.floor(diff / 1000) % 60;
      timeStr += hour < 10 ? "0" + hour : hour;
      timeStr += ":";
      timeStr += minute < 10 ? "0" + minute : minute;
      timeStr += ":";
      timeStr += second < 10 ? "0" + second : second;
      return timeStr;
    },
  },
};
</script>
<style>
.mt-color-theme {
  color: #52c7ca !important;
}
.mt-color-grey-lv2 {
  color: #2f343b;
}
.wcsq_ld_content {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  margin-top: 15px;
}
.wcsq-ld-img {
  width: 26px !important;
  height: 26px !important;
  margin-top: 12px !important;
  margin-right: 5px !important;
  display: inline-block !important;
}
</style>

<style scoped src="../../public/style.css"></style>
<style scoped src="../../public/skin.css"></style>
